import React, { useEffect, useState,useCallback } from 'react';
import { Button, Input, Card, Form, Spin } from 'antd';
import { Api, requestFn } from '@/api/api.js'
import useCountStore from '@/store/count/count.js'

const Home = () => {
  // const { Button, Input, Card, Form, message, Spin } = useAntdComponents();
  const { Meta } = Card;
  // const [count, setCount] = useState(0);
  const [dbData, setDbData] = useState([]);
  const [loading, setLoading] = useState(true);
  const {count,increment,decrement,DbList,fetchDbList}=useCountStore()
  // const count = useCountStore((state) => state.count);

  const handleClick = () => {
    // setCount(598)
    // useCountStore((state) => state.increment());
    // useStore((state) => state.increment);
    increment()
  };

  // 提取数据获取逻辑为独立函数
// 使用 useCallback 缓存函数，避免每次渲染都创建新函数
// useCallback 会缓存函数，只有当依赖数组中的值发生变化时才会创建新函数
// 在这个场景中，fetchChannelList 不依赖任何外部变量，所以依赖数组为空 []
// 这样就能确保 fetchChannelList 在组件的整个生命周期中只创建一次
// 这样修改后，组件就不会出现无限刷新的问题了。
  const fetchChannelList = useCallback(async () => {
    setLoading(true);
    try {
      const res = await requestFn(Api.db, 'get');
      console.log(res, 'res');
      
      // 确保数据是数组格式
      if (Array.isArray(res)) {
        setDbData(res);
      } else {
        setDbData([]); // 如果不是数组，设置为空数组
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      console.error('API endpoint:', Api.db);
      console.error('Error details:', error.message);
      setDbData([]); // 出错时设置为空数组
    } finally {
      setLoading(false);
    }
  }, []); // 空依赖数组表示函数不依赖任何外部变量


// 使用 useEffect 在组件挂载时执行
  useEffect(() => {
    fetchChannelList();
    fetchDbList();//直接从zustand调用函数 更新数据
  }, [fetchChannelList,fetchDbList]); // 现在 fetchChannelList 不会频繁变化

  return (
    <div className="content">
      <h1>欢迎来到首页</h1>
      <p>这是应用程序的主页。</p>
      
      <Button onClick={handleClick} type="primary"> count is {count}</Button>
      <Button onClick={decrement} type="primary"> count is {count}</Button>

      <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <Spin size="large" />
          </div>
        ) : dbData && dbData.length > 0 ? (
          dbData.map((item, index) => (
            <p key={index}>
              {item.author ? `${item.author} - ${item.title}` : '未知作者 - 无标题'}
            </p>
          ))
        ) : (
          <p>暂无数据</p>
        )}
      </Card>
      <div>
      <h3>来自 Zustand Store 的数据:</h3>
        {Array.isArray(DbList) && DbList.length > 0 ? (
          DbList.map((item, index) => (
            <p key={item.id || index}>
              {item.author && item.title 
                ? `${item.author} - ${item.title}` 
                : '未知作者 - 无标题'}
            </p>
          ))
        ) : (
          <p>暂无数据</p>
        )}
      </div>
    </div>
  );
};

export default Home;